<template>
  <div id="productBar" />
</template>

<script>
import { get7dayInSum, get7dayOutSum } from '@/api/graph'

export default {
  name: 'ProductInAndOutCount',
  data() {
    return {
      option: {
        title: {
          text: '近七日进货/出货量'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: []
        },
        series: [
          {
            name: '进货',
            type: 'bar',
            data: []
          },
          {
            name: '出货',
            type: 'bar',
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.getBarData()
  },
  methods: {
    getBarData() {
      const myChart = this.$echarts.init(document.getElementById('productBar'))
      // let inContent = ''
      // let outContent = ''
      const params = JSON.parse(JSON.stringify(this.option))
      const date = []
      get7dayInSum().then(response => {
        const { content } = response
        // inContent = content
        for (let i = 0; i < content.length; i++) {
          params['series'][0]['data'].push(content[i]['sum'])
        }
      })
      get7dayOutSum().then(response => {
        const { content } = response
        const len = content.length
        // outContent = content
        for (let i = 0; i < len; i++) {
          date.push(content[i].DATE)
        }
        params['yAxis']['data'] = date
        for (let i = 0; i < len; i++) {
          params['series'][1]['data'].push(content[i]['sum'])
        }
        myChart.setOption(params)
      })
    }

  }
}
</script>
<style scoped>
#productBar {
  width: 500px;
  height: 500px;
}
</style>
